<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>Drawer</title>
    <!-- 组件样式（全部的） -->
    <link rel="stylesheet" href="../../dist/tdesign.css" />
    <!--
      TDesign 图标库，桌面端与移动端用同样的资源
      使用方式：<i class="t-icon t-icon-delete"></i>
    -->
    <link
      rel="stylesheet"
      href="https://tdesign.gtimg.com/icon/0.0.3/fonts/index.css"
    />
  </head>
  <body>
    <div class="tdesign-demo-wrap tdesign-demo-dialog">
      <!-- 开发者信息 -->
      <div class="tdesign-demo-wrap__name">
        <h1 class="">Drawer 抽屉</h1>
        <p class="tdesign-demo-wrap__info">开发者：samonxian</p>
        <p class="tdesign-demo-wrap__info">创建日期：2020-11-12</p>
        <p class="tdesign-demo-wrap__info">
          说明：TDesign Drawer 组件的基本样式
        </p>
      </div>

      <!-- 组件开始区 -->

      <!-- 基础抽屉 -->
      <div class="tdesign-demo-item">
        <h2 class="tdesign-demo-item__title">基础的抽屉</h2>
        <!-- 灰底区域 可多个 -->
        <div class="tdesign-demo-item__body">
          <!-- 内容区 Start-->
          <!-- tdesign-demo-block block内容容器，加了上间距 -->
          <div class="tdesign-demo-block">
            <div class="t-drawer__content-wrapper">
              <h5 class="t-drawer__header">我是标题</h5>
              <div class="t-drawer__close-btn">
                <i class="t-icon t-icon-close"></i>
              </div>
              <div class="t-drawer__body">
                <p>
                  组件库能帮我们节省开发精力，无需所有东西都从头做，通过一些小组件拼接起来，就得到了我们想要的最终页面。赶紧加入前端通用组件库大军吧！
                </p>
              </div>
            </div>
          </div>

          <!-- 内容区 End-->
        </div>
      </div>

      <!-- 页脚抽屉 -->
      <div class="tdesign-demo-item">
        <h2 class="tdesign-demo-item__title">带有页脚的抽屉</h2>
        <!-- 灰底区域 可多个 -->
        <div class="tdesign-demo-item__body">
          <!-- 内容区 Start-->
          <!-- tdesign-demo-block block内容容器，加了上间距 -->
          <div class="tdesign-demo-block">
            <div class="t-drawer__content-wrapper">
              <h5 class="t-drawer__header">我是标题</h5>
              <div class="t-drawer__close-btn">
                <i class="t-icon t-icon-close"></i>
              </div>
              <div class="t-drawer__body">
                <p>
                  组件库能帮我们节省开发精力，无需所有东西都从头做，通过一些小组件拼接起来，就得到了我们想要的最终页面。赶紧加入前端通用组件库大军吧！
                </p>
              </div>
              <div class="t-drawer__footer">
                <button class="t-button t-button--primary">确定</button>
                <button class="t-button t-button--line">取消</button>
              </div>
            </div>
          </div>

          <!-- 内容区 End-->
        </div>
      </div>
      <!-- 内容区域滚动抽屉 -->
      <div class="tdesign-demo-item">
        <h2 class="tdesign-demo-item__title">内容区域滚动抽屉</h2>
        <!-- 灰底区域 可多个 -->
        <div class="tdesign-demo-item__body">
          <!-- 内容区 Start-->
          <!-- tdesign-demo-block block内容容器，加了上间距 -->
          <div class="tdesign-demo-block tdesign-demo-block-line">
            <div class="t-drawer__content-wrapper">
              <h5 class="t-drawer__header">我是标题</h5>
              <div class="t-drawer__close-btn">
                <i class="t-icon t-icon-close"></i>
              </div>
              <div class="t-drawer__body">
                <p>
                  组件库能帮我们节省开发精力，无需所有东西都从头做，通过一些小组件拼接起来，就得到了我们想要的最终页面。赶紧加入前端通用组件库大军吧！
                </p>
                <p>
                  组件库能帮我们节省开发精力，无需所有东西都从头做，通过一些小组件拼接起来，就得到了我们想要的最终页面。赶紧加入前端通用组件库大军吧！
                </p>
                <p>
                  组件库能帮我们节省开发精力，无需所有东西都从头做，通过一些小组件拼接起来，就得到了我们想要的最终页面。赶紧加入前端通用组件库大军吧！
                </p>
                <p>
                  组件库能帮我们节省开发精力，无需所有东西都从头做，通过一些小组件拼接起来，就得到了我们想要的最终页面。赶紧加入前端通用组件库大军吧！
                </p>
              </div>
              <div class="t-drawer__footer">
                <button class="t-button t-button--primary">确定</button>
                <button class="t-button t-button--line">取消</button>
              </div>
            </div>
          </div>
          <div class="tdesign-demo-block tdesign-demo-block-line">
            <div class="t-drawer__content-wrapper">
              <h5 class="t-drawer__header">我是标题</h5>
              <div class="t-drawer__close-btn">
                <i class="t-icon t-icon-close"></i>
              </div>
              <div class="t-drawer__body">
                <p>
                  组件库能帮我们节省开发精力，无需所有东西都从头做，通过一些小组件拼接起来，就得到了我们想要的最终页面。赶紧加入前端通用组件库大军吧！
                </p>
                <p>
                  组件库能帮我们节省开发精力，无需所有东西都从头做，通过一些小组件拼接起来，就得到了我们想要的最终页面。赶紧加入前端通用组件库大军吧！
                </p>
                <p>
                  组件库能帮我们节省开发精力，无需所有东西都从头做，通过一些小组件拼接起来，就得到了我们想要的最终页面。赶紧加入前端通用组件库大军吧！
                </p>
                <p>
                  组件库能帮我们节省开发精力，无需所有东西都从头做，通过一些小组件拼接起来，就得到了我们想要的最终页面。赶紧加入前端通用组件库大军吧！
                </p>
              </div>
            </div>
          </div>
          <!-- 内容区 End-->
        </div>
      </div>

      <!-- 组件大小 -->
      <div class="tdesign-demo-item">
        <h2 class="tdesign-demo-item__title">大小</h2>
        <p>
          由于对话框宽度或者高度属于组件 size API，因而此处无需 UI
          开发宽度或者高度样式。
        </p>
      </div>
    </div>
  </body>
</html>
